<template>
  <div class="dashboard-container">
    <el-row>
      <el-col :xs="{span: 24}" :sm="{span: 24}" :md="{span: 16}" :lg="{span: 16}" :xl="{span: 16}" style="padding-right: 3px;">
        <test-item />
      </el-col>
      <el-col :xs="{span: 24}" :sm="{span: 24}" :md="{span: 8}" :lg="{span: 8}" :xl="{span: 8}" style="padding-left:6px;">
        <quick-entry />
      </el-col>
    </el-row>

    <!--<el-row :gutter="8">
      <el-col :xs="{span: 24}" :sm="{span: 24}" :md="{span: 8}" :lg="{span: 8}" :xl="{span: 8}" style="">
        <msg-table />
      </el-col>
      <el-col :xs="{span: 24}" :sm="{span: 24}" :md="{span: 8}" :lg="{span: 8}" :xl="{span: 8}" style="">
        <todo-list />
      </el-col>
      <el-col :xs="{span: 24}" :sm="{span: 24}" :md="{span: 8}" :lg="{span: 8}" :xl="{span: 8}" style="padding-left:5px;">
        <exam-notice />
      </el-col>
    </el-row>-->

    <el-row>
      <el-col :xs="{span: 24}" :sm="{span: 24}" :md="{span: 16}" :lg="{span: 16}" :xl="{span: 16}" style="padding-right: 3px;">
        <!-- <div class="chart-wrapper"> -->
        <line-chart/>
        <!-- </div> -->
      </el-col>
        <el-col :xs="24" :sm="24" :lg="8">
            <div class="chart-wrapper">
                <pie-chart />
            </div>
        </el-col>
      <!--<el-col :xs="{span: 24}" :sm="{span: 24}" :md="{span: 8}" :lg="{span: 8}" :xl="{span: 8}" style="padding-left:6px; ">
        <cert-table />
      </el-col>-->
    </el-row>
    <component :is="currentRole" />
     <adminDashboard/>
     <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <raddar-chart />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <pie-chart />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <bar-chart />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import RaddarChart from './components/RaddarChart'
import PieChart from './components/PieChart'
import BarChart from './components/BarChart'
import LineChart from './components/LineChart'
import MsgTable from './components/MsgTable'
import NoticeTable from './components/NoticeTable'
import TodoList from './components/TodoList'
import ExamNotice from './components/ExamNotice'
import CertTable from './components/CertTable'
import TestItem from './components/TestItem'
import QuickEntry from './components/QuickEntry'

export default {
  name: 'Dashboard',
  components: {
    RaddarChart,
    PieChart,
    BarChart,
    LineChart,
    MsgTable,
    NoticeTable,
    TodoList,
    ExamNotice,
    CertTable,
    QuickEntry,
    TestItem
  },
  data() {
    return {
      currentRole: 'adminDashboard'
    }
  },
  computed: {
    ...mapGetters([
      // 'roles'
      'name'
    ])
  },
  created() {
    /*if (!this.roles.includes('admin')) {
      this.currentRole = 'editorDashboard'
    }*/
  }
}
</script>

<style lang="scss">
  .dashboard-container{
    padding: 10px;
  }
</style>
